<template>
    <div id="cf_pager">
      <button @click="changePage('prev')">上一页</button>
      <button v-for="num in total" :class="{active:showpage===num }" :data-showpage="showpage" :key="num" @click="changePage(num)">
        {{num}}
      </button>
      <button @click="changePage('next')">下一页</button>
    </div>
</template>

<style lang="less" scoped>
#cf_pager {
  text-align: center;
  margin: 10px 0;
}
.active {
  background: red;
}
</style>

<script>
export default {
  components:{},
  props:{
    total: Number,
    showpage: Number
  },
  data(){
    return {
        
    }
  },
  methods:{
    changePage(param) {
      console.log('页数', param,this.showpage)
      this.$emit('change-page',param)
    }
  }
}
</script>